<template>
	<view class="memory-container">
		<!-- 游戏状态：说明 -->
		<view v-if="gameState === 'instruction'" class="instruction-section">
			<view class="title">记忆力测试</view>
			<view class="instruction-content">
				<view class="instruction-item">
					<text class="icon">🧠</text>
					<text class="text">记住屏幕上出现的数字序列</text>
				</view>
				<view class="instruction-item">
					<text class="icon">👀</text>
					<text class="text">数字会依次闪烁显示</text>
				</view>
				<view class="instruction-item">
					<text class="icon">✋</text>
					<text class="text">按照相同顺序点击数字</text>
				</view>
				<view class="instruction-item">
					<text class="icon">📈</text>
					<text class="text">每轮成功后难度会增加</text>
				</view>
			</view>
			
			<view class="difficulty-selector">
				<view class="difficulty-title">选择难度</view>
				<view class="difficulty-options">
					<view 
						v-for="level in difficultyLevels" 
						:key="level.value"
						:class="['difficulty-option', { active: selectedDifficulty === level.value }]"
						@click="selectDifficulty(level.value)"
					>
						<view class="difficulty-name">{{ level.name }}</view>
						<view class="difficulty-desc">{{ level.desc }}</view>
					</view>
				</view>
			</view>
			
			<button class="start-btn" @click="startGame">开始测试</button>
		</view>
		
		<!-- 游戏状态：准备 -->
		<view v-if="gameState === 'ready'" class="ready-section">
			<view class="ready-title">准备开始</view>
			<view class="ready-info">
				<view class="level-info">第 {{ currentLevel }} 关</view>
				<view class="sequence-info">需要记忆 {{ currentSequence.length }} 个数字</view>
			</view>
			<view class="countdown">{{ countdown }}</view>
		</view>
		
		<!-- 游戏状态：显示序列 -->
		<view v-if="gameState === 'showing'" class="game-section">
			<view class="game-header">
				<view class="level-indicator">第 {{ currentLevel }} 关</view>
				<view class="progress-bar">
					<view class="progress" :style="{ width: showProgress + '%' }"></view>
				</view>
			</view>
			
			<view class="instruction-text">请记住数字出现的顺序</view>
			
			<view class="number-grid">
				<view 
					v-for="(number, index) in numbers" 
					:key="index"
					:class="['number-cell', { 
						active: activeNumber === number,
						shown: shownNumbers.includes(number)
					}]"
				>
					{{ number }}
				</view>
			</view>
		</view>
		
		<!-- 游戏状态：用户输入 -->
		<view v-if="gameState === 'input'" class="game-section">
			<view class="game-header">
				<view class="level-indicator">第 {{ currentLevel }} 关</view>
				<view class="input-progress">
					{{ userInput.length }} / {{ currentSequence.length }}
				</view>
			</view>
			
			<view class="instruction-text">按照刚才的顺序点击数字</view>
			
			<view class="user-sequence">
				<view class="sequence-title">你的输入：</view>
				<view class="sequence-display">
					<view 
						v-for="(num, index) in userInput" 
						:key="index"
						class="input-number"
					>
						{{ num }}
					</view>
					<view v-if="userInput.length < currentSequence.length" class="next-input">?</view>
				</view>
			</view>
			
			<view class="number-grid">
				<view 
					v-for="(number, index) in numbers" 
					:key="index"
					:class="['number-cell', 'clickable', {
						clicked: clickedNumbers.includes(number)
					}]"
					@click="selectNumber(number)"
				>
					{{ number }}
				</view>
			</view>
			
			<view class="input-actions">
				<button class="action-btn secondary" @click="undoInput" :disabled="userInput.length === 0">
					撤销
				</button>
				<button class="action-btn primary" @click="submitInput" :disabled="userInput.length !== currentSequence.length">
					提交
				</button>
			</view>
		</view>
		
		<!-- 游戏状态：结果 -->
		<view v-if="gameState === 'result'" class="result-section">
			<view class="result-header">
				<view class="result-icon">{{ isCorrect ? '🎉' : '😔' }}</view>
				<view class="result-title">{{ isCorrect ? '答对了！' : '答错了！' }}</view>
			</view>
			
			<view class="sequence-comparison">
				<view class="comparison-row">
					<view class="comparison-label">正确答案：</view>
					<view class="comparison-sequence">
						<view 
							v-for="(num, index) in currentSequence" 
							:key="index"
							class="sequence-number correct"
						>
							{{ num }}
						</view>
					</view>
				</view>
				<view class="comparison-row">
					<view class="comparison-label">你的答案：</view>
					<view class="comparison-sequence">
						<view 
							v-for="(num, index) in userInput" 
							:key="index"
							:class="['sequence-number', {
								correct: num === currentSequence[index],
								wrong: num !== currentSequence[index]
							}]"
						>
							{{ num }}
						</view>
					</view>
				</view>
			</view>
			
			<view class="result-stats">
				<view class="stat-item">
					<view class="stat-value">{{ currentLevel }}</view>
					<view class="stat-label">当前关卡</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">{{ score }}</view>
					<view class="stat-label">当前得分</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">{{ Math.round(reactionTime) }}ms</view>
					<view class="stat-label">反应时间</view>
				</view>
			</view>
			
			<view class="result-actions">
				<button v-if="isCorrect" class="action-btn primary" @click="nextLevel">
					下一关
				</button>
				<button v-else class="action-btn secondary" @click="retryLevel">
					重试
				</button>
				<button class="action-btn secondary" @click="endGame">
					结束游戏
				</button>
			</view>
		</view>
		
		<!-- 游戏状态：最终结果 -->
		<view v-if="gameState === 'final'" class="final-section">
			<view class="final-header">
				<view class="final-icon">🏆</view>
				<view class="final-title">测试完成</view>
				<view class="final-subtitle">{{ getFinalMessage() }}</view>
			</view>
			
			<view class="final-stats">
				<view class="final-stat-item">
					<view class="final-stat-value">{{ maxLevel }}</view>
					<view class="final-stat-label">最高关卡</view>
				</view>
				<view class="final-stat-item">
					<view class="final-stat-value">{{ finalScore }}</view>
					<view class="final-stat-label">最终得分</view>
				</view>
				<view class="final-stat-item">
					<view class="final-stat-value">{{ Math.round(averageReactionTime) }}ms</view>
					<view class="final-stat-label">平均反应时间</view>
				</view>
				<view class="final-stat-item">
					<view class="final-stat-value">{{ getGrade() }}</view>
					<view class="final-stat-label">评级</view>
				</view>
			</view>
			
			<view class="performance-analysis">
				<view class="analysis-title">表现分析</view>
				<view class="analysis-content">
					<view class="analysis-item">
						<text class="analysis-label">记忆能力：</text>
						<text class="analysis-value">{{ getMemoryRating() }}</text>
					</view>
					<view class="analysis-item">
						<text class="analysis-label">反应速度：</text>
						<text class="analysis-value">{{ getSpeedRating() }}</text>
					</view>
					<view class="analysis-item">
						<text class="analysis-label">专注程度：</text>
						<text class="analysis-value">{{ getFocusRating() }}</text>
					</view>
				</view>
			</view>
			
			<view class="final-actions">
				<button class="action-btn primary" @click="restartGame">再次测试</button>
				<button class="action-btn secondary" @click="goHome">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 游戏状态
const gameState = ref('instruction') // instruction, ready, showing, input, result, final
const selectedDifficulty = ref('normal')
const currentLevel = ref(1)
const maxLevel = ref(1)
const score = ref(0)
const finalScore = ref(0)
const isCorrect = ref(false)
const countdown = ref(3)

// 序列相关
const currentSequence = ref([])
const userInput = ref([])
const clickedNumbers = ref([])
const numbers = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
const activeNumber = ref(null)
const shownNumbers = ref([])

// 时间相关
const showProgress = ref(0)
const reactionTime = ref(0)
const averageReactionTime = ref(0)
const reactionTimes = ref([])
const startTime = ref(0)
const inputStartTime = ref(0)

// 定时器
let countdownTimer = null
let showTimer = null
let progressTimer = null

// 难度配置
const difficultyLevels = ref([
	{
		value: 'easy',
		name: '简单',
		desc: '3-5个数字，显示时间较长',
		startLength: 3,
		maxLength: 5,
		showDuration: 1000,
		interval: 800
	},
	{
		value: 'normal',
		name: '普通',
		desc: '4-7个数字，显示时间适中',
		startLength: 4,
		maxLength: 7,
		showDuration: 800,
		interval: 600
	},
	{
		value: 'hard',
		name: '困难',
		desc: '5-9个数字，显示时间较短',
		startLength: 5,
		maxLength: 9,
		showDuration: 600,
		interval: 400
	}
])

// 当前难度配置
const currentDifficulty = computed(() => {
	return difficultyLevels.value.find(d => d.value === selectedDifficulty.value)
})

// 生成随机序列
const generateSequence = () => {
	const difficulty = currentDifficulty.value
	const baseLength = difficulty.startLength
	const extraLength = Math.min(currentLevel.value - 1, difficulty.maxLength - baseLength)
	const sequenceLength = baseLength + extraLength
	
	const sequence = []
	for (let i = 0; i < sequenceLength; i++) {
		sequence.push(Math.floor(Math.random() * 9) + 1)
	}
	return sequence
}

// 选择难度
const selectDifficulty = (difficulty) => {
	selectedDifficulty.value = difficulty
}

// 开始游戏
const startGame = () => {
	resetGame()
	startLevel()
}

// 重置游戏
const resetGame = () => {
	currentLevel.value = 1
	maxLevel.value = 1
	score.value = 0
	reactionTimes.value = []
	clearAllTimers()
}

// 开始关卡
const startLevel = () => {
	gameState.value = 'ready'
	currentSequence.value = generateSequence()
	userInput.value = []
	clickedNumbers.value = []
	shownNumbers.value = []
	activeNumber.value = null
	showProgress.value = 0
	
	// 倒计时
	countdown.value = 3
	countdownTimer = setInterval(() => {
		countdown.value--
		if (countdown.value <= 0) {
			clearInterval(countdownTimer)
			showSequence()
		}
	}, 1000)
}

// 显示序列
const showSequence = () => {
	gameState.value = 'showing'
	startTime.value = Date.now()
	
	const difficulty = currentDifficulty.value
	const totalDuration = currentSequence.value.length * (difficulty.showDuration + difficulty.interval)
	
	// 进度条动画
	progressTimer = setInterval(() => {
		const elapsed = Date.now() - startTime.value
		showProgress.value = Math.min((elapsed / totalDuration) * 100, 100)
	}, 50)
	
	// 显示数字序列
	let index = 0
	const showNext = () => {
		if (index < currentSequence.value.length) {
			const number = currentSequence.value[index]
			activeNumber.value = number
			shownNumbers.value.push(number)
			
			setTimeout(() => {
				activeNumber.value = null
				index++
				setTimeout(showNext, difficulty.interval)
			}, difficulty.showDuration)
		} else {
			// 序列显示完毕，开始输入阶段
			clearInterval(progressTimer)
			setTimeout(() => {
				startInput()
			}, 500)
		}
	}
	
	showNext()
}

// 开始输入阶段
const startInput = () => {
	gameState.value = 'input'
	inputStartTime.value = Date.now()
}

// 选择数字
const selectNumber = (number) => {
	if (clickedNumbers.value.includes(number)) return
	
	userInput.value.push(number)
	clickedNumbers.value.push(number)
	
	// 如果输入完成，自动提交
	if (userInput.value.length === currentSequence.value.length) {
		setTimeout(() => {
			submitInput()
		}, 300)
	}
}

// 撤销输入
const undoInput = () => {
	if (userInput.value.length > 0) {
		const lastNumber = userInput.value.pop()
		const index = clickedNumbers.value.indexOf(lastNumber)
		if (index > -1) {
			clickedNumbers.value.splice(index, 1)
		}
	}
}

// 提交输入
const submitInput = () => {
	const endTime = Date.now()
	reactionTime.value = endTime - inputStartTime.value
	reactionTimes.value.push(reactionTime.value)
	
	// 检查答案
	isCorrect.value = JSON.stringify(userInput.value) === JSON.stringify(currentSequence.value)
	
	// 计算得分
	if (isCorrect.value) {
		const baseScore = currentLevel.value * 100
		const speedBonus = Math.max(0, 5000 - reactionTime.value) / 100
		const difficultyMultiplier = selectedDifficulty.value === 'easy' ? 1 : selectedDifficulty.value === 'normal' ? 1.5 : 2
		score.value += Math.round((baseScore + speedBonus) * difficultyMultiplier)
	}
	
	gameState.value = 'result'
}

// 下一关
const nextLevel = () => {
	currentLevel.value++
	maxLevel.value = Math.max(maxLevel.value, currentLevel.value)
	startLevel()
}

// 重试关卡
const retryLevel = () => {
	startLevel()
}

// 结束游戏
const endGame = () => {
	finalScore.value = score.value
	averageReactionTime.value = reactionTimes.value.reduce((a, b) => a + b, 0) / reactionTimes.value.length || 0
	gameState.value = 'final'
	saveGameData()
}

// 重新开始游戏
const restartGame = () => {
	gameState.value = 'instruction'
	resetGame()
}

// 返回首页
const goHome = () => {
	uni.navigateBack()
}

// 获取最终消息
const getFinalMessage = () => {
	if (maxLevel.value >= 10) return '记忆大师！'
	if (maxLevel.value >= 7) return '记忆力超群！'
	if (maxLevel.value >= 5) return '表现不错！'
	return '继续加油！'
}

// 获取评级
const getGrade = () => {
	if (maxLevel.value >= 10) return 'S'
	if (maxLevel.value >= 8) return 'A'
	if (maxLevel.value >= 6) return 'B'
	if (maxLevel.value >= 4) return 'C'
	return 'D'
}

// 获取记忆能力评级
const getMemoryRating = () => {
	if (maxLevel.value >= 10) return '优秀'
	if (maxLevel.value >= 7) return '良好'
	if (maxLevel.value >= 5) return '一般'
	return '需要提高'
}

// 获取反应速度评级
const getSpeedRating = () => {
	if (averageReactionTime.value < 2000) return '很快'
	if (averageReactionTime.value < 3000) return '较快'
	if (averageReactionTime.value < 4000) return '一般'
	return '较慢'
}

// 获取专注程度评级
const getFocusRating = () => {
	const accuracy = reactionTimes.value.length > 0 ? (reactionTimes.value.length / maxLevel.value) : 0
	if (accuracy >= 0.8) return '很好'
	if (accuracy >= 0.6) return '良好'
	if (accuracy >= 0.4) return '一般'
	return '需要提高'
}

// 保存游戏数据
const saveGameData = () => {
	const gameData = {
		date: new Date().toISOString(),
		difficulty: selectedDifficulty.value,
		maxLevel: maxLevel.value,
		finalScore: finalScore.value,
		averageReactionTime: averageReactionTime.value,
		grade: getGrade()
	}
	
	// 获取历史数据
	const historyKey = 'memory_test_history'
	let history = []
	try {
		const stored = uni.getStorageSync(historyKey)
		if (stored) {
			history = JSON.parse(stored)
		}
	} catch (e) {
		console.error('读取历史数据失败:', e)
	}
	
	// 添加新记录
	history.unshift(gameData)
	
	// 只保留最近50条记录
	if (history.length > 50) {
		history = history.slice(0, 50)
	}
	
	// 保存数据
	try {
		uni.setStorageSync(historyKey, JSON.stringify(history))
	} catch (e) {
		console.error('保存历史数据失败:', e)
	}
}

// 清除所有定时器
const clearAllTimers = () => {
	if (countdownTimer) {
		clearInterval(countdownTimer)
		countdownTimer = null
	}
	if (showTimer) {
		clearTimeout(showTimer)
		showTimer = null
	}
	if (progressTimer) {
		clearInterval(progressTimer)
		progressTimer = null
	}
}

// 组件卸载时清理
onUnmounted(() => {
	clearAllTimers()
})
</script>

<style lang="scss" scoped>
.memory-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40rpx 30rpx;
	color: white;
}

// 说明页面样式
.instruction-section {
	text-align: center;
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 60rpx;
		color: #fff;
	}
	
	.instruction-content {
		margin-bottom: 60rpx;
		
		.instruction-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			padding: 20rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			
			.icon {
				font-size: 36rpx;
				margin-right: 20rpx;
			}
			
			.text {
				font-size: 28rpx;
				flex: 1;
				text-align: left;
			}
		}
	}
	
	.difficulty-selector {
		margin-bottom: 60rpx;
		
		.difficulty-title {
			font-size: 32rpx;
			margin-bottom: 30rpx;
			font-weight: bold;
		}
		
		.difficulty-options {
			display: flex;
			gap: 20rpx;
			
			.difficulty-option {
				flex: 1;
				padding: 30rpx 20rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 15rpx;
				border: 2rpx solid transparent;
				transition: all 0.3s;
				
				&.active {
					background: rgba(255, 255, 255, 0.2);
					border-color: #fff;
					transform: scale(1.05);
				}
				
				.difficulty-name {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.difficulty-desc {
					font-size: 22rpx;
					opacity: 0.8;
				}
			}
		}
	}
	
	.start-btn {
		width: 300rpx;
		height: 80rpx;
		background: linear-gradient(45deg, #ff6b6b, #ee5a24);
		color: white;
		border: none;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
		transition: all 0.3s;
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
		}
	}
}

// 准备页面样式
.ready-section {
	text-align: center;
	padding-top: 200rpx;
	
	.ready-title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 60rpx;
	}
	
	.ready-info {
		margin-bottom: 80rpx;
		
		.level-info {
			font-size: 36rpx;
			margin-bottom: 20rpx;
			color: #ffd700;
		}
		
		.sequence-info {
			font-size: 28rpx;
			opacity: 0.8;
		}
	}
	
	.countdown {
		font-size: 120rpx;
		font-weight: bold;
		color: #ffd700;
		animation: pulse 1s infinite;
	}
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

// 游戏页面样式
.game-section {
	.game-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		
		.level-indicator {
			font-size: 32rpx;
			font-weight: bold;
			color: #ffd700;
		}
		
		.progress-bar {
			width: 200rpx;
			height: 8rpx;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 4rpx;
			overflow: hidden;
			
			.progress {
				height: 100%;
				background: #ffd700;
				transition: width 0.1s;
			}
		}
		
		.input-progress {
			font-size: 28rpx;
			color: #ffd700;
		}
	}
	
	.instruction-text {
		text-align: center;
		font-size: 28rpx;
		margin-bottom: 40rpx;
		opacity: 0.9;
	}
	
	.number-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		margin-bottom: 40rpx;
		
		.number-cell {
			aspect-ratio: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			font-size: 48rpx;
			font-weight: bold;
			transition: all 0.3s;
			border: 3rpx solid transparent;
			
			&.active {
				background: #ffd700;
				color: #333;
				transform: scale(1.1);
				box-shadow: 0 0 30rpx rgba(255, 215, 0, 0.6);
			}
			
			&.shown {
				background: rgba(255, 215, 0, 0.3);
				border-color: #ffd700;
			}
			
			&.clickable {
				cursor: pointer;
				
				&:hover {
					background: rgba(255, 255, 255, 0.2);
					transform: scale(1.05);
				}
				
				&.clicked {
					background: rgba(255, 215, 0, 0.5);
					border-color: #ffd700;
					pointer-events: none;
				}
			}
		}
	}
	
	.user-sequence {
		margin-bottom: 40rpx;
		
		.sequence-title {
			font-size: 28rpx;
			margin-bottom: 20rpx;
			text-align: center;
		}
		
		.sequence-display {
			display: flex;
			justify-content: center;
			gap: 15rpx;
			flex-wrap: wrap;
			
			.input-number {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #ffd700;
				color: #333;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
			
			.next-input {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(255, 255, 255, 0.3);
				border: 2rpx dashed #fff;
				border-radius: 10rpx;
				font-size: 28rpx;
				opacity: 0.7;
			}
		}
	}
	
	.input-actions {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}
}

// 结果页面样式
.result-section {
	text-align: center;
	
	.result-header {
		margin-bottom: 40rpx;
		
		.result-icon {
			font-size: 80rpx;
			margin-bottom: 20rpx;
		}
		
		.result-title {
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	
	.sequence-comparison {
		margin-bottom: 40rpx;
		
		.comparison-row {
			margin-bottom: 20rpx;
			
			.comparison-label {
				font-size: 24rpx;
				margin-bottom: 10rpx;
				opacity: 0.8;
			}
			
			.comparison-sequence {
				display: flex;
				justify-content: center;
				gap: 10rpx;
				flex-wrap: wrap;
				
				.sequence-number {
					width: 50rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: bold;
					
					&.correct {
						background: #4caf50;
						color: white;
					}
					
					&.wrong {
						background: #f44336;
						color: white;
					}
				}
			}
		}
	}
	
	.result-stats {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
		
		.stat-item {
			text-align: center;
			
			.stat-value {
				font-size: 36rpx;
				font-weight: bold;
				color: #ffd700;
				margin-bottom: 10rpx;
			}
			
			.stat-label {
				font-size: 22rpx;
				opacity: 0.8;
			}
		}
	}
	
	.result-actions {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}
}

// 最终结果页面样式
.final-section {
	text-align: center;
	
	.final-header {
		margin-bottom: 60rpx;
		
		.final-icon {
			font-size: 100rpx;
			margin-bottom: 20rpx;
		}
		
		.final-title {
			font-size: 48rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		
		.final-subtitle {
			font-size: 32rpx;
			color: #ffd700;
		}
	}
	
	.final-stats {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		margin-bottom: 60rpx;
		
		.final-stat-item {
			padding: 30rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			
			.final-stat-value {
				font-size: 48rpx;
				font-weight: bold;
				color: #ffd700;
				margin-bottom: 10rpx;
			}
			
			.final-stat-label {
				font-size: 24rpx;
				opacity: 0.8;
			}
		}
	}
	
	.performance-analysis {
		margin-bottom: 60rpx;
		
		.analysis-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		
		.analysis-content {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			padding: 30rpx;
			
			.analysis-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.analysis-label {
					font-size: 28rpx;
				}
				
				.analysis-value {
					font-size: 28rpx;
					font-weight: bold;
					color: #ffd700;
				}
			}
		}
	}
	
	.final-actions {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}
}

// 通用按钮样式
.action-btn {
	padding: 20rpx 40rpx;
	border-radius: 25rpx;
	font-size: 28rpx;
	font-weight: bold;
	border: none;
	transition: all 0.3s;
	min-width: 120rpx;
	
	&.primary {
		background: linear-gradient(45deg, #4caf50, #45a049);
		color: white;
		box-shadow: 0 4rpx 15rpx rgba(76, 175, 80, 0.4);
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.4);
		}
	}
	
	&.secondary {
		background: rgba(255, 255, 255, 0.2);
		color: white;
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		
		&:active {
			background: rgba(255, 255, 255, 0.3);
		}
		
		&:disabled {
			opacity: 0.5;
			pointer-events: none;
		}
	}
}
</style>
